{% extends 'themes/default/public/layout.html' %}

{% block style %}
<style>
    .setting {

    }
    .setting .nav {
        overflow: hidden;
    }
    .setting .nav li {
        float: left;
        cursor: default;
        padding: 5px 10px;
        color: black;
        margin-right: 5px;
        border: 1px solid #403f3f;
    }
    .setting .nav li:hover {
        background: #403f3f;
        color: white;
    }
    .setting .nav li.active {
        background: #403f3f;
        color: white;
    }
    .setting .main {
        margin: 30px;
    }
    .setting .main .box {
        display: none;
    }
    #avatarimg {
        width: 50px;
    }
</style>
{% endblock %}

{% block body %}
<div class="mdui-container-fluid">
    <div class="nexmoe-item">
        <div class="mdui-row layui-row layui-col-space15">
            <div class="setting">
                <ul class="nav">
                    <li class="active">
                        基础设置
                    </li>
                </ul>
                <div class="main layui-form">
                    <div class="box" style="display: block;">
                        <form id="setting" onsubmit="return false" action="##" method="post">
                            <input type="hidden" name="formtype" value="1">
                            <div class="layui-form-item">
                                <label class="layui-form-label">头像</label>
                                <div class="layui-input-inline">
                                    <input type="hidden" name="avatar" id="avatar" value="{{ data.avatar }}">
                                    <img src="{{ data.avatar }}" alt="" id="avatarimg">
                                </div>
                                <button style="float: left;" type="button" class="layui-btn" id="upload-avatar">上传图片</button>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="nickname" placeholder="请输入昵称" value="{{ data.nickname }}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="description" placeholder="请输入描述" value="{{ data.description }}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" lay-filter="sex">
                                <label class="layui-form-label">选择性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="3" title="保密" {% if data.sex == 3 %}checked{% endif %}>
                                    <input type="radio" name="sex" value="1" title="男" {% if data.sex == 1 %}checked{% endif %}>
                                    <input type="radio" name="sex" value="2" title="女" {% if data.sex == 2 %}checked{% endif %}>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="password" placeholder="留空则不修改密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" placeholder="请输入邮箱" value="{{ data.email }}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <button id="setting-submit" class="layui-btn">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="application/javascript" src="{{url_for('static', filename='layui/layui.js')}}"></script>
<script>
    layui.use(['form', 'layer', 'upload'], function(){
        var $ = layui.$; //重点处
        var form = layui.form;
        var upload = layui.upload;

        upload.render({
            elem: '#upload-avatar'
            ,url: '/users/upload'
            ,accept: 'images'
            ,acceptMime: 'image/*'
            ,done: function(res){
                if(res.code == "0"){
                    $("#avatar").val(res.data.src);
                    $("#avatarimg").attr("src", res.data.src);
                }else{
                    layer.msg(res.msg)
                }
            }
        });

        // 基本设置提交
        $('#setting-submit').on('click', function () {
            $.ajax({
                url: "/users/setting"
                ,type: "POST"
                ,dataType: "json"
                ,data: $('#setting').serialize()
                ,success: function (data) {
                    if(data.code==0){
                        layer.msg("保存成功！");
                        setTimeout(function () {
                            location.reload();
                        },1000);
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        });
    });
</script>
{% endblock %}